<!--
 * @Author: wangyu
 * @Date: 2024-12-26 21:50:04
 * @LastEditTime: 2024-12-28 20:27:36
 * @LastEditors: wangyu
 * @Description: 楼栋详情
 * @FilePath: \dzsq-smartpark-platform\src\views\detailed\components\build.vue
-->
<template>
  <comHeaer title="楼栋详情"> </comHeaer>
  <div class="buildDetailed">
    <!-- 楼栋详情 -->
    <header>楼栋详情</header>
    <div class="buildDetailed-info">
      <div>
        <div>楼栋编号：</div>
        <div>{{ props.data.ldbh }}</div>
      </div>
      <div>
        <div>楼栋名称：</div>
        <div>{{ props.data.ldmc }}</div>
      </div>
      <div>
        <div>空置面积：</div>
        <div>{{ props.data.kzmj }}</div>
      </div>
      <div>
        <div>空置房间：</div>
        <div>{{ props.data.kzfj }}</div>
      </div>
      <div>
        <div>类型：</div>
        <div>{{ props.data.lx }}</div>
      </div>
      <div>
        <div>备注：</div>
        <div>{{ props.data.bz }}</div>
      </div>
      <div>
        <div>层数：</div>
        <div>{{ props.data.cs }}</div>
      </div>
      <div>
        <div>单层面积：</div>
        <div>{{ props.data.dcmj }}</div>
      </div>
      <div>
        <div>防火级别：</div>
        <div>{{ props.data.fhjb }}</div>
      </div>
      <div>
        <div>耐火等级：</div>
        <div>{{ props.data.nhdj }}</div>
      </div>
      <div style="line-height: 36px">
        <div>楼栋可收金：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="100"
            color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
            :stroke-width="16"
            :format="
              () => {
                return `${props.data.ldksj}万元`;
              }
            "
          ></el-progress>
        </div>
      </div>
      <div style="line-height: 36px">
        <div>已租可收金：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="
              ((props.data.yzksj / props.data.ldksj) * 100).toFixed(2)
            "
            color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
            :stroke-width="16"
            :format="
              () => {
                return `${props.data.yzksj}万元`;
              }
            "
          ></el-progress>
        </div>
      </div>
      <div style="line-height: 36px">
        <div>当前已收租金：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="
              ((props.data.dqyszj / props.data.ldksj) * 100).toFixed(2)
            "
            color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
            :stroke-width="16"
            :format="
              () => {
                return `${props.data.dqyszj}万元`;
              }
            "
          ></el-progress>
        </div>
      </div>
    </div>
  </div>
  <div v-if="lcxq" class="buildDetailed">
    <!-- 楼栋详情 -->
    <header>楼层详情</header>
    <div class="buildDetailed-info">
      <div>
        <div>楼层：</div>
        <div>{{ lcxq.lc }}</div>
      </div>
      <div>
        <div>楼层面积：</div>
        <div>{{ lcxq.lcmj }}</div>
      </div>
      <div>
        <div>空置面积：</div>
        <div>{{ lcxq.kzmj }}</div>
      </div>
      <div>
        <div>空置房间：</div>
        <div>{{ lcxq.kzfj }}</div>
      </div>
      <div style="line-height: 36px">
        <div>楼栋可收租金：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="100"
            color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
            :stroke-width="16"
            :format="
              () => {
                return `${lcxq.ldkszj}万元`;
              }
            "
          ></el-progress>
        </div>
      </div>
      <div style="line-height: 36px">
        <div>已租可收租金：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="((lcxq.yzkszj / lcxq.ldkszj) * 100).toFixed(2)"
            color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
            :stroke-width="16"
            :format="
              () => {
                return `${lcxq.yzkszj}万元`;
              }
            "
          ></el-progress>
        </div>
      </div>
      <div style="line-height: 36px">
        <div>当前已收租金：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="((lcxq.dqyszj / lcxq.ldkszj) * 100).toFixed(2)"
            color="linear-gradient(90deg, rgba(136, 250, 200, 1) 0%, rgba(136, 250, 200, 1) 0%, rgba(102, 186, 248, 1) 100%, rgba(102, 186, 248, 1) 100%)"
            :stroke-width="16"
            :format="
              () => {
                return `${lcxq.dqyszj}万元`;
              }
            "
          ></el-progress>
        </div>
      </div>
    </div>
  </div>
  <div v-if="hxxq" class="buildDetailed">
    <!-- 楼栋详情 -->
    <header>户型详情</header>
    <div class="buildDetailed-info">
      <div>
        <div>门牌号：</div>
        <div>{{ hxxq.mph }}</div>
      </div>
      <div>
        <div>防火级别：</div>
        <div>{{ hxxq.fhjb }}</div>
      </div>
      <div>
        <div>耐火等级：</div>
        <div>{{ hxxq.nhdj }}</div>
      </div>
      <div>
        <div>套内面积：</div>
        <div>{{ hxxq.tnmj }}</div>
      </div>
      <div>
        <div>租金：</div>
        <div>{{ hxxq.zj }}</div>
      </div>
      <div style="line-height: 36px">
        <div>收益率：</div>
        <div style="flex: 2.5">
          <el-progress
            text-color="#ffffff"
            :percentage="hxxq.syl"
            color=""
            :stroke-width="16"
          ></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import comHeaer from "../../components/comHeader/index.vue";
const props = defineProps({
  data: Object,
});

const lcxq = computed(() => {
  return props.data.list.filter((item) => {
    return item.active;
  })[0];
});
const hxxq = computed(() => {
  return lcxq.value.list.filter((item) => {
    return item.active;
  })[0];
});
</script>
<style scoped lang="scss">
::v-deep {
  .el-progress__text {
    color: #ffffff;
  }
}
.buildDetailed {
  font-size: 14px;
  margin-top: 10px;
  &-info {
    padding: 0 16px;
    > div {
      display: flex;
      line-height: 26px;
      align-items: center;
      > div {
        flex: 1;
      }
    }
  }
  > header {
    position: relative;
    height: 24px;
    line-height: 24px;
    padding-left: 36px;
    background-image: url(@/assets/imgs/u1206.svg);
    background-repeat: no-repeat;
    background-size: cover;
    &::after {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      top: 50%;
      left: 8px;
      border: 1px solid #65b8f8;
      transform: translateY(-50%);
    }
    &::before {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: #65b8f8;
      top: 50%;
      left: 11px;
      transform: translateY(-50%);
    }
  }
}
</style>
